<template>
    <h1>一个人的消息</h1>
    姓: <input type="text" v-model="person.firstName">
    名: <input type="text" v-model="person.secondName">
    <h2>{{person.fullName}}</h2>
    <span></span>
</template>
<script>
    import { reactive, computed } from 'vue'
    export default {
        name: 'Demo',
        props: ['num1', 'num2'],
        setup() {
            let person = reactive({
                firstName: '张',
                secondName: '三'
            })

            //计算属性(没有考虑被修改的情况)
            // person.fullName = computed(() => {
            //     return person.firstName + '-' + person.secondName
            // })

            //计算属性(考虑被修改的情况)
            person.fullName = computed({
                get() {
                    return person.firstName + '-' + person.secondName
                },
                set(value) {
                    const nameArr = value.split('-');
                    nameArr[0] = person.firstName;
                    nameArr[1] = person.secondName;
                    return nameArr
                }

            })
            return { person }
        },
        // computed: {
        //     fullName() {
        //         return this.person.firstName + '-' + this.person.secondName
        //     }
        // }vue2的写法


    }  
</script>
<style>
</style>